<template>
  <div>
    <div class="pageheader">
      <XHeader :left-options="{backText:''}" :title="xheader.title" class="XHeader"></XHeader>
    </div>
    <!-- <div class="pagetop">
      <div class="toptab">
        <div
          v-for="(item,index) in tab"
          :key="index"
          class="item"
          :class="tabIndex==index?'active':''"
          @click="onTabTap(index)"
        >{{item.text}}</div>
      </div>
    </div>-->
    <scroller
      @on-pullup-loading="getList"
      lock-x
      ref="scroller"
      :pullup-config="{content:'',upContent:'',downContent:'释放加载更多',loadingContent:'加载中...',}"
      height="-45"
      :use-pullup="true"
    >
      <div class="page">
        <div class="block" style="margin-top:10px;" v-for="(item,index) in orders" :key="index">
          <div class="brokerageitem" @click="onInfo(item)">
            <div class="header">
              <div class="ordernumber">售后单号: {{item.after_sale_sn}}</div>
              <!-- <div class='state'>待成团</div> -->
              <div class="state">{{item.state_desc}}</div>
            </div>
            <div class="content">
              <img class="image" :src="item.goods_image">
              <div style="flex:1;">
                <div class="titlebar">
                  <div class="title">{{item.goods_name}}</div>
                  <div class="price">
                    <div class="price-text">￥{{item.refund_amount}}</div>
                    <div class="tip">x{{item.goods_number}}</div>
                  </div>
                </div>

                <div class="app-specs" v-if="item.skuInfo.feature_str">规格: {{item.skuInfo.feature_str}}</div>
              </div>
            </div>
          </div>
        </div>
        <load-more
          v-if="!more&&!orders.length"
          :show-loading="false"
          :tip="'暂无数据'"
          background-color="#fbf9fe"
        ></load-more>
      </div>
    </scroller>
  </div>
</template>

<script>
  // import Enum from '@/config/enum'
  import Me from '@/dll/me'
  // import Pay from '@/dll/pay'
  // import util from '@/utils/util'

  export default {
    name: 'mallOrderAfterSale',
    data () {
      return {
        xheader: {
          title: '售后'
        },
        orders: [],
        page: 1,
        more: true
      }
    },
    created () {

    },
    activated () {
      this.init()
    },

    methods: {
      onSearchTap () {
      },
      onInfo (item) {
        this.$router.push({
          name: 'mallOrderAfterSaleInfo',
          params: { id: item.after_sale_sn }
        })
      },
      init () {
        this.getList()
      },

      // 获取售后列表
      async getList () {
        if (!this.more) {
          return
        }
        let page = this.page
        let param = {
          page: page
        }

        this.$vux.loading.show({
          text: '加载中'
        })
        let res = await Me.getMallOrderAfterList(param)
        this.$vux.loading.hide()
        if (res.code == 0) {
          if (page >= res.data.pageParam.lastPage) {
            this.more = false
            this.$refs.scroller.disablePullup()
          }
          let orders = []
          for (var i in res.data.data) {
            orders.push(res.data.data[i])
          }
          this.page = page + 1
          this.orders = [].concat(this.orders, orders)
          this.$forceUpdate()
          this.$refs.scroller.donePullup()
        } else {
          this.more = false
          this.$forceUpdate()
          this.$refs.scroller.disablePullup()
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  .block {
    padding: 0 10px;
  }

  .page {
    padding-bottom: 12px;
  }

  .pagetop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
  }

  .toptab {
    box-sizing: border-box;
    width: 100%;
    display: flex;
    padding-left: 12px;
    padding-right: 12px;
    height: 45px;
    background-color: #fff;
  }

  .toptab > .item {
    flex: 1;
    height: 100%;
    display: block;
    line-height: 45px;
    font-size: 14px;
    color: #351009;
    opacity: 0.2;
    text-align: center;
    position: relative;
  }

  .toptab > .item.active {
    opacity: 1;
    color: #2196F3;
  }

  .toptab > .item.active::after {
    position: absolute;
    content: "";
    width: 100%;
    bottom: 0;
    left: 0;
    height: 1px;
    background: #2196F3;
  }

  .brokerageitem {
    background-color: #fff;
    border-radius: 10px;
  }

  .brokerageitem .header {
    display: flex;
    padding: 10px;
    font-size: 12px;
    line-height: 17px;
    align-items: center;
  }

  .brokerageitem .ordernumber {
    flex: 1;
    color: #808080;
  }

  .brokerageitem .state {
    color: #FF5722;
  }

  .brokerageitem .content {
    display: flex;
    flex-direction: row;
    padding: 10px;
    border-top: 1px solid #fbf8f7;
    border-bottom: 1px solid #fbf8f7;
    align-items: center;
  }

  .brokerageitem .content .image {
    width: 70px;
    height: 70px;
    display: block;
    margin-right: 10px;
    background: rgba(243, 243, 243, 1);
  }

  .brokerageitem .content .titlebar {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /*height: 70px;*/
  }

  .brokerageitem .content .title {
    color: #333333;
    font-size: 14px;
    height: 38px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-weight: normal;
  }

  .brokerageitem .content .pricebar {
    margin-top: 5px;
    display: flex;
    align-items: center;
    flex-direction: row;
    font-size: 14px;
    color: #351009;
    line-height: 20px;
  }

  .brokerageitem .content .price {
    display: flex;
    font-size: 12px;
    /*height: 28px;*/
    align-items: flex-end;
  }

  .price-text {
    color: #FF5722;
    font-size: 14px;
  }

  .tip {
    color: #808080;
    margin-left: 9px;
  }
</style>
